<template>
    <div class="body">

        <el-container>
            <el-header>XXX管理系统</el-header>
            <el-container>
                <el-aside width="800px">
                    用户列表
                    <el-table :data="list" style="width: 100%">
                        <el-table-column prop="inputName" label="姓名" width="180">
                        </el-table-column>
                        <el-table-column prop="inputId" label="账户" width="180">
                        </el-table-column>
                        <el-table-column prop="inputPassword" label="密码">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template>
                                <!-- 怎样去修改数据？？？？？ -->
                                <!-- <el-button size="mini" @click="change(inputName)">编辑</el-button> -->
                                <router-link to="/menu"> go </router-link>
                                <el-button size="mini" type="danger" @click="del(inputId)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- <router-view></router-view> -->
                </el-aside>
                <el-container class="right">

                    <el-main>
                        <el-input v-model="inputName" placeholder="姓名"></el-input>
                        <el-input v-model="inputId" placeholder="用户账号"></el-input>
                        <el-input placeholder="请输入密码" v-model="inputPassword" show-password></el-input>
                        <!-- <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch> -->
                        <el-button type="success" @click="log()" round> 登录 </el-button>
                    </el-main>

                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
            inputName: '',
            inputId: '',
            inputPassword: '',
            value: true,
            list: [

            ]
        }
    },
    methods: {
        log(){
            this.list.unshift({
                inputName: this.inputName,
                inputId: this.inputId,
                inputPassword: this.inputPassword
            })
            this.inputName = ''
            this.inputId = ''
            this.inputPassword = ''
        },
        del(name){
            this.list = this.list.filter(item => item.inputId !== name)
        },
        // change(name){
            
        // }
    }
}
</script>

<style>
.body{
    background-color: pink; 
    width: 100%;
    height: 1000px;
}
.el-header{
    background-color: #B3C0D1;
    margin: 20px 0;
    font-size: 30px
}
.el-aside{
    height: 200px;
    /* background-image: url(../assets/logo.png); */
}
.right{
    text-align: center;
    height: 600px;
    /* background-image: url(../assets/Background.png); */
}
</style>